<template>
    <div class="visitorpie">
        <div id="visitorpie" class="" style="width: 90%;height:450px;"></div>
		<div id="task" class="" style="width: 90%;height:450px;"></div>
    </div>
</template>

<script>
    import echarts from 'echarts/lib/echarts';
    // 引入柱状图
    import 'echarts/lib/chart/pie';
    import 'echarts/lib/component/title';
    import 'echarts/lib/component/legend';
    
    export default {
        mounted(){
            this.myChart = echarts.init(document.getElementById('visitorpie'));
            this.initData();
			
			this.myChart1 = echarts.init(document.getElementById('task'));
			this.initData1();
			// this.myChart = echarts.init(document.getElementById('task'));
			// this.initData();
	
        },
        props: ['pieData'],
        methods: {
            initData(){
                const option = {
                    title : {
                        text: '用户分布',
                        subtext: '',
                        x:'center'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['北京','上海','深圳','杭州','其他']
                    },
                    series : [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius : '55%',
                            center: ['50%', '60%'],
                            data:[
                                {value:this.pieData.beijing, name:'北京'},
                                {value:this.pieData.shanghai, name:'上海'},
                                {value:this.pieData.shenzhen, name:'深圳'},
                                {value:this.pieData.hangzhou, name:'杭州'},
                                {value:this.pieData.qita, name:'其他'}
                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };

                this.myChart.setOption(option);
            },
			initData1(){
				var option;
				option = {
				    title: {
				        text: '某站点用户访问来源',
				        subtext: '纯属虚构',
				        left: 'center'
				    },
				    tooltip: {
				        trigger: 'item'
				    },
					// legend: {
					//     orient: 'vertical',
					//     left: 'left',
					//     data: ['北京','上海','深圳','杭州','其他']
					// },
				    legend: {
				        orient: 'vertical',
				        left: 'left',
						data: ['搜索引擎','直接访问','邮件营销','联盟广告','视频广告']
				    },
				    series: [
				        {
				            name: '访问来源',
				            type: 'pie',
				            radius: '50%',
				            data: [
				                {value: 1048, name: '搜索引擎'},
				                {value: 735, name: '直接访问'},
				                {value: 580, name: '邮件营销'},
				                {value: 484, name: '联盟广告'},
				                {value: 300, name: '视频广告'}
				            ],
				            emphasis: {
				                itemStyle: {
				                    shadowBlur: 10,
				                    shadowOffsetX: 0,
				                    shadowColor: 'rgba(0, 0, 0, 0.5)'
				                }
				            }
				        }
				    ]
				};

				this.myChart1.setOption(option);
				console.log("fdsfdsfds")
			},
		},

        watch: {
            pieData: function (){
                this.initData()
            }
        }
    }
</script>

<style lang="less" scoped="scoped">
	@import '../style/mixin';
    .visitorpie{
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }
	#task{
		background-color: yellow;
	}
</style>
